<template>
  <!-- 头部 -->
  <section class="header">
    <div class="top">
      <div class="topCpn">
        <img src="~assets/images/home/topwords.png" alt class="topwords" />
        <a href="/">
          <img src="~assets/images/home/logo.png" alt="院校帮logo" class="logo" />
        </a>
      </div>
    </div>
    <div class="menu oldMenu">
      <ul class="nav clearfix">
        <li class="active">
          <a href="/">
            <span>首页</span>
          </a>
        </li>
        <li id="old_li_3">
          <a href="/originalBook/Java">
            <span>原创教材</span>
            <i class="arrows-down-ico"></i>
          </a>
          <ul class="subNav">
            <li>
              <a href="http://resource.ityxb.com/" target="_blank">图书库</a>
            </li>
            <li>
              <a href="https://book.itheima.net/" target="_blank">黑马教程</a>
            </li>
          </ul>
        </li>
        <li id="cultivate">
          <a href="/training">
            <span>
              <i class="new_sign-ico"></i>师资培训
            </span>
          </a>
        </li>
        <li id="old_li_1">
          <a href="./school.html">
            <span>高校教辅平台</span>
            <i class="arrows-down-ico"></i>
          </a>
          <ul class="subNav">
            <li>
              <a href="teacher" target="_blank">教师登录</a>
            </li>
            <li>
              <a href="student" target="_blank">学生登录</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/megagame/1">
            <span>编程大赛</span>
          </a>
        </li>
        <li>
          <a href="/openclass">
            <span>院校公开课</span>
          </a>
        </li>
        <li id="old_li_2">
          <a href="/getajob">
            <span>
              <i class="new_sign-ico"></i>实习实训
            </span>
            <i class="arrows-down-ico"></i>
          </a>
          <ul class="subNav">
            <li>
              <a href="/practicalcase/1">实训项目库</a>
            </li>
            <li>
              <a href="/getajobList/1">就业喜报</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="/major">
            <span>专业建设</span>
          </a>
        </li>
        <li>
          <a href="/industry">
            <span>协同育人</span>
          </a>
        </li>
        <li>
          <a href="/about">
            <span>关于我们</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="menu fixMenu" style="display:none;">
      <ul class="nav clearfix">
        <li class="active">
          <a href="/">
            <span>首页</span>
          </a>
        </li>
        <li id="fix_li_3">
          <a href="/originalBook/Java">
            <span>原创教材</span>
            <i class="arrows-down-ico"></i>
          </a>
          <ul class="subNav">
            <li>
              <a href="http://resource.ityxb.com/" target="_blank">图书库</a>
            </li>
            <li>
              <a href="https://book.itheima.net/" target="_blank">黑马教程</a>
            </li>
          </ul>
        </li>
        <li id="cultivate">
          <a href="/training">
            <span>
              <i class="new_sign-ico"></i>师资培训
            </span>
          </a>
        </li>
        <li id="fix_li_1">
          <a href="/school">
            <span>高校教辅平台</span>
            <i class="arrows-down-ico"></i>
          </a>
          <ul class="subNav">
            <li>
              <a href="http://tch.ityxb.com/" target="_blank">教师登录</a>
            </li>
            <li>
              <a href="http://stu.boxuegu.com/" target="_blank">学生登录</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="/megagame/1">
            <span>编程大赛</span>
          </a>
        </li>
        <li>
          <a href="/openclass">
            <span>院校公开课</span>
          </a>
        </li>
        <li id="fix_li_2">
          <a href="/getajob">
            <span>
              <i class="new_sign-ico"></i>实习实训
            </span>
            <i class="arrows-down-ico"></i>
          </a>
          <ul class="subNav">
            <li>
              <a href="/practicalcase/1">实训项目库</a>
            </li>
            <li>
              <a href="/getajobList/1">就业喜报</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="/major">
            <span>专业建设</span>
          </a>
        </li>
        <li>
          <a href="/industry">
            <span>协同育人</span>
          </a>
        </li>
        <li>
          <a href="/about">
            <span>关于我们</span>
          </a>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},
  // mounted() {
  //   var THIS = this;
  //   window.addEventListener("scroll", function () {
  //     //监听滚动
  //     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  //     if (scrollTop >= 140) {
  //       //如果当前滚动位置大于您的所需要达到的高度则显示置顶元素，反之不显示
  //       document.getElementsByClassName("fixMenu").style.display = "block";
  //     } else {
  //       document.getElementsByClassName("fixMenu").style.display = "none";
  //     }
  //   });
  // },
  methods: {},
};
</script>

<style  scoped>
.header {
  height: 140px;
  widows: 100vw;
  /* border: 1px solid red; */
}
.header .top {
  height: 80px;
  background-color: #f5f7fa;
}
.header .topCpn {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
.header .topCpn .topwords {
  position: absolute;
  right: 0;
  top: 37px;
}
img {
  border: none;
}
.header .topCpn .logo {
  margin: 20px 32px 0 0;
}
.header .oldMenu {
  display: block;
}
.header .menu {
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.08);
}
.header .menu .nav {
  width: 1200px;
  margin: 0 auto;
}
.header .menu .nav li {
  float: left;
  position: relative;
  margin-right: 10px;
  line-height: 60px;
}
ol,
ul {
  list-style: none;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
}
a {
  text-decoration: none;
  color: #303133;
}
.header .menu .nav li.active span {
  padding: 0 20px;
  color: #1b2a3a;
  border-radius: 15px;
  font-weight: 500;
  border: 1px solid #1b2a3a;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}
.header .menu .nav li span {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
  border: 1px solid #fff;
  padding: 0 20px;
  cursor: pointer;
}
.header .menu .nav .subNav {
  width: 140px;
  position: absolute;
  padding-top: 10px;
  top: 60px;
  left: 50%;
  margin-left: -70px;
  z-index: 10;
  display: none;
  -webkit-box-shadow: 0 3px 11px 0 rgba(31, 45, 60, 0.12);
  -moz-box-shadow: 0 3px 11px 0 rgba(31, 45, 60, 0.12);
  -o-box-shadow: 0 3px 11px 0 rgba(31, 45, 60, 0.12);
  -ms-box-shadow: 0 3px 11px 0 rgba(31, 45, 60, 0.12);
  box-shadow: 0 3px 11px 0 rgba(31, 45, 60, 0.12);
}
.header .menu .nav .subNav:before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  border-width: 8px;
  cursor: pointer;
  border-style: dashed dashed solid dashed;
  border-color: transparent transparent #fff transparent;
  border-top: none;
}
.header .menu .nav .subNav li {
  width: 100%;
  height: 36px;
  line-height: 36px;
  background: #fff;
  margin-bottom: 2px;
  text-align: center;
  float: none;
  margin-right: 0;
  border-radius: 0;
  border: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  font-weight: 400;
}
.header .menu .nav .subNav li a {
  display: block;
}
.header .menu .nav li .arrows-down-ico {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -2px;
  right: 10px;
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  border-width: 4px;
  cursor: pointer;
  border-style: solid dashed dashed dashed;
  border-color: #303133 transparent transparent transparent;
  border-bottom: none;
}

#old_li_1:hover .subNav {
  display: block;
}
#old_li_2:hover .subNav {
  display: block;
}
#old_li_3:hover .subNav {
  display: block;
}

.header .fixMenu {
  position: fixed !important;
  top: 0;
  z-index: 9999;
  background-color: #1f2d3c !important;
}
.header .menu {
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.08);
}
.header .menu .nav {
  width: 1200px;
  margin: 0 auto;
}
.header .menu .nav li {
  float: left;
  position: relative;
  margin-right: 10px;
  line-height: 60px;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix::before {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.header .fixMenu .nav li.active span {
  border-color: #fff;
  color: #fff;
}
.header .fixMenu .nav li span {
  border-color: #1f2d3c;
  color: #fff;
}
.header .fixMenu .nav li .arrows-down-ico {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  border-width: 4px;
  cursor: pointer;
  border-style: solid dashed dashed dashed;
  border-color: #fff transparent transparent transparent;
  border-bottom: none;
}
#fix_li_1:hover .subNav {
  display: block;
}
#fix_li_2:hover .subNav {
  display: block;
}
#fix_li_3:hover .subNav {
  display: block;
}
</style>